<template>
  <header class="nav-bar">
    <img :src="logo" class="logo" alt="logo">
    <div class="siteName">电影市场分析</div>

    <!-- 导航链接 -->
    <nav class="nav">
      <router-link
          v-for="r in navList"
          :key="r.name"
          :to="r.path"
          class="nav-item"
          active-class="active"
      >
        {{ r.title }}
      </router-link>
    </nav>

    <!-- 右侧插槽（登录、搜索等） -->
    <div class="extra">
      <slot />
    </div>
  </header>
</template>

<script setup lang="ts">
import logo from '@/assets/logo.png';
// 导航配置，想加就加
const navList = [
  { name: 'Home', path: '/', title: '首页' }
]
</script>

<style scoped>
.nav-bar {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0 1vw;
  width: 100%;
  height: 7vh;
  background: white;
  color: hsl(214, 58%, 61%);
  border-bottom: 1px solid #8cb4e3;
  gap: 2vw;
  align-items: center;
}
.logo {
  font-size: 1.2rem;
  font-weight: 700;
  height: 65%;
  width: auto;
}
.nav {
  display: flex;
  gap: 24px;
  color: #282828;
}
.siteName {
  font-size: 1.2rem;
  font-weight: 700;
}
.nav-item {
  color: rgb(24, 24, 24);
  text-decoration: none;
  transition: color 0.3s;
  display: block;
  background: rgba(255,189,126,0);
}
.nav-item:hover,
.nav-item.active {
  color: hsl(214, 58%, 61%);
}
.extra {
  display: flex;
}
</style>
